<template>
    <div>
        <van-nav-bar title="科室列表" left-arrow @click-left="onClickLeft" />
        <div class="backDepart">
            <div class="flexNav">
                <img style="width: 45px;height: 45px;"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E9%99%A2%E5%8C%BA%E5%88%97%E8%A1%A8/u602.png"
                    alt="">
                <div>
                    <p style="font-size:16PX;font-weight: 700;">四川省保健院南苑</p>
                    <p style="font-size: 12px;color: #7f7f7f;">四川省成都市锦江区画溪路666号</p>
                </div>
                <div>
                    <p style="font-size: 14px;color: #7f7f7f;">切换院区 &gt;</p>
                </div>
            </div>
            <div class="messageText">
                <p style="font-size: 14px;color: #7f7f7f;">不知道挂什么科，问问智能客服？</p>
                <p style="font-size: 14px;color: #1675fa;">去咨询</p>
            </div>

        </div>

        <div class="inpText">
            <input class="input" v-model="searchTxt" placeholder="搜索科室" type="text" @input="filterItems">
        </div>
        <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="filteredItems"
            @click-item="changItem" @click-nav="changActive" />
    </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import axios from 'axios';
import router from '@/router';


const onClickLeft = () => history.back();
const activeId = ref();
const activeIndex = ref();
const items = ref([])
let searchTxt = ref('')


onMounted(() => {
    getDeparty()
})
// 将后端传递过来的_id转换为id
const transformId = (item) => {
    if (item) {
        const { _id, ...rest } = item;
        return { id: _id, ...rest };
    }
    return item;
};
//  递归处理子节点
const transformChildren = (items) => {
    return items.map(item => {
        const transformedItem = transformId(item);
        if (transformedItem.children && transformedItem.children.length > 0) {
            transformedItem.children = transformChildren(transformedItem.children);
        }
        return transformedItem;
    });
};

// 前端搜索科室
const filterItems = () => {
    if (!searchTxt.value) {
        filteredItems.value = items.value;
        activeId.value = null;
        activeIndex.value = null;
        return;
    }

    const searchValue = searchTxt.value;
    const filterRecursive = (items, parentIndex = 0, currentIndex = 0) => {
        let indexOffset = 0;
        return items.filter((item, index) => {
            const labelMatch = item.text.includes(searchValue);
            if (labelMatch) {
                if (activeId.value === null) {
                    activeId.value = item.id;
                    activeIndex.value = currentIndex + index;
                }
                return true;
            }
            if (item.children && item.children.length > 0) {
                const childrenMatch = filterRecursive(item.children, parentIndex, currentIndex + index + 1 + indexOffset).length > 0;
                if (childrenMatch) {
                    item.children = filterRecursive(item.children, parentIndex, currentIndex + index + 1 + indexOffset);
                    return true;
                }
            }
            indexOffset += item.children ? item.children.length : 0;
            return false;
        });
    };

    filteredItems.value = filterRecursive(items.value);
};


const filteredItems = computed(() => {
    return items.value;
});

const getDeparty = async () => {
    let { data: { depart } } = await axios.get('http://127.0.0.1:3000/depart', {
        params: {
            text: searchTxt.value
        }
    })

    const transformedDepart = transformChildren(depart);
    items.value = transformedDepart;

}

const changActive = (e) => {
    console.log(e, '点击了');
}
const changItem = (e) => {
    console.log(e.text);
    router.push({
        name: 'departAllDetail',
        query: {
            text: e.text
        }
    })
}


watch(searchTxt, (newVal) => {
    if (newVal === '') {
        activeId.value = null;
        activeIndex.value = null;
    }
    filterItems();
});



</script>

<style scoped lang="scss">
.backDepart {
    height: 150px;
    background-color: #e6f4ff;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .flexNav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 25px;
    }

    .messageText {
        height: 45px;
        line-height: 45px;
        background-color: #ffffff;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        padding: 0 16px;
    }

    van-tree-select {
        height: 100vh;
    }
}

.inpText {

    padding: 14px;

    .input {
        width: 100%;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        padding-left: 16px;
        box-sizing: border-box;
        font-size: 1rem;
    }
}

.selected {
    background-color: aqua;
}
</style>